<template>
  <van-loading v-if="tabLoading">加载中...</van-loading>
  <van-list v-else-if="list && list.length" v-model="loading" :finished="finished" finished-text="没有更多了" :error.sync="error" error-text="请求失败，点击重新加载" @load="getHomeList">
    <house-card v-for="item in list" :key="item.id" :title="item.title" :total-price="item.totalPrice" :average-price="item.averagePrice" @click.native="toDetail(item.id)" />
  </van-list>
  <van-empty v-else description="暂无数据" />
</template>

<script>
import { List } from 'vant'
import { getHomeList } from '@/api/home/index'
import HouseCard from '@/components/Card/HouseCard'
export default {
  components: {
    [List.name]: List,
    HouseCard
  },
  props: {
    type: {
      type: String,
      default() {
        return '1'
      }
    },
    name: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      listQuery: {
        type: this.type,
        title: this.name,
        page: 1,
        limit: 10
      },
      list: [],
      tabLoading: true,
      loading: false,
      error: false,
      finished: false
    }
  },
  created() {
    this.getHomeList()
  },
  methods: {
    // 获取列表数据
    async getHomeList() {
      try {
        const {
          data: { records, page, limit, total }
        } = await getHomeList(this.listQuery)
        this.list = [...this.list, ...records]
        // records.forEach((v) => {
        //   this.list.push(v)
        // })
        this.listQuery.page++
        this.tabLoading = false
        this.loading = false
        if (page >= total / limit) {
          this.finished = true
        }
      } catch (e) {
        this.tabLoading = false
        this.loading = false
        this.error = true
        console.log(e)
      }
    },
    toDetail(id) {
      console.log(id)
      this.$router.push({ name: 'HouseDetail', query: { id } })
    }
  }
}
</script>

<style scoped lang="less"></style>
